<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "usercenter-base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    我的资料
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content_user %}
    {% if nav_tab == "info" %}
        {# 本列用于显示用户信息修改表单 #}
        <div class="column is-offset-one-quarter is-half">
            {# 用户信息修改表单 #}
            <div class="columns is-multiline">
                <div class="card column">
                    {# 标题 #}
                    <header class="card-header has-background-primary">
                        <div class="columns is-full has-text-centered is-multiline">
                            <form action="{% url 'users:image' %}" method="post" id="AvatarForm">
                                <div class="column is-full">
                                    <figure class="image is-128x128 is-rounded">
                                        <img src="{{ MEDIA_URL }}{{ user.avatar }}" alt="Image"
                                             class="is-rounded img-show"
                                             id="img-show">
                                    </figure>
                                </div>
                                <div class="column is-full">
                                    <input class="" type="file" id="img-up" name="avatar">
                                </div>
                                {% csrf_token %}
                            </form>
                        </div>
                    </header>

                    {# 主体 #}
                    <div class="card-content">
                        <form action="{% url 'users:info' %}" method="post">
                            <table class="table is-striped is-fullwidth">
                                <thead class="has-text-centered">
                                <tr>
                                    <th></th>
                                    <th>原&nbsp;&nbsp;值</th>
                                    <th>修&nbsp;&nbsp;改</th>
                                </tr>
                                </thead>
                                <tbody class="has-text-centered">
                                <tr>
                                    <th>用&nbsp;户&nbsp;名</th>
                                    <td>
                                        {{ user.username }}
                                    </td>
                                    <td>
                                        <div class="content columns is-multiline">
                                            {# 输入框 #}
                                            <div class="column is-8 is-offset-2">
                                                <input class="input {% if user_info_form.errors.password %}is-danger{% else %}is-primary{% endif %} is-rounded"
                                                       name="username" type="text"
                                                       value=""
                                                       placeholder="请输入新用户名">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>昵&nbsp;&nbsp;称</th>
                                    <td>
                                        {{ user.nick_name }}
                                    </td>
                                    <td>
                                        <div class="content columns is-multiline">
                                            {# 输入框 #}
                                            <div class="column is-8 is-offset-2">
                                                <input class="input {% if user_info_form.errors.password %}is-danger{% else %}is-primary{% endif %} is-rounded"
                                                       name="nick_name" type="text"
                                                       value=""
                                                       placeholder="请输入新昵称">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>姓&nbsp;&nbsp;氏</th>
                                    <td>{{ user.last_name }}</td>
                                    <td>
                                        <div class="content columns is-multiline">
                                            {# 输入框 #}
                                            <div class="column is-8 is-offset-2">
                                                <input class="input {% if user_info_form.errors.username %}is-danger{% else %}is-primary{% endif %} is-rounded"
                                                       name="last_name" type="text"
                                                       value=""
                                                       placeholder="请输入新姓氏">
                                            </div>
                                        </div>
                                    </td>

                                </tr>
                                <tr>
                                    <th>名&nbsp;&nbsp;称</th>
                                    <td>{{ user.first_name }}</td>
                                    <td>
                                        <div class="content columns is-multiline">
                                            {# 输入框 #}
                                            <div class="column is-8 is-offset-2">
                                                <input class="input {% if user_info_form.errors.username %}is-danger{% else %}is-primary{% endif %} is-rounded"
                                                       name="first_name" type="text"
                                                       value="{{ user_info_form.username.value }}"
                                                       placeholder="请输入新名称">
                                            </div>
                                        </div>
                                    </td>

                                </tr>
                                <tr>
                                    <th>性&nbsp;&nbsp;别</th>
                                    <td>
                                        <div class="content columns is-multiline">
                                            {# 单选框 #}
                                            <div class="column is-8 is-offset-2">
                                                <div class="control">
                                                    <label class="radio">
                                                        <input type="radio" name="gender1"
                                                                {% if user.gender == 'male' %}
                                                               checked="checked"
                                                                {% endif %} >男
                                                    </label>
                                                    <label class="radio">
                                                        <input type="radio" name="gender1"
                                                                {% if user.gender == 'female' %}
                                                               checked="checked"
                                                                {% endif %} >女
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="content columns is-multiline">
                                            {# 单选框 #}
                                            <div class="column is-8 is-offset-2">
                                                <div class="control">
                                                    <label class="radio">
                                                        <input type="radio" name="gender" value="male">
                                                        男
                                                    </label>
                                                    <label class="radio">
                                                        <input type="radio" name="gender" value="female">
                                                        女
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                            {# 底部 #}
                            <footer class="card-footer">
                                <a class="button is-rounded is-primary card-footer-item"
                                   href="{% url 'users:info' %}?nav_tab=update_pwd">
                                    修&nbsp;&nbsp;改&nbsp;&nbsp;密&nbsp;&nbsp;码
                                </a>
                                <button class="button is-rounded is-primary card-footer-item" type="submit">
                                    修&nbsp;&nbsp;改&nbsp;&nbsp;资&nbsp;&nbsp;料
                                </button>

                            </footer>
                            {% csrf_token %}
                        </form>
                    </div>

                </div>
            </div>
        </div>
    {% endif %}

    {% if nav_tab == "update_pwd" %}
        {# 本列用于显示用户密码修改表单 #}
        <div class="column is-offset-one-quarter is-half">
            {# 本列用于显示登录错误信息 #}
            <div class="column is-offset-one-quarter is-half">
                {# 判断是否有错误： #}
                {# 当错误消息不为空时才显示 #}
                {% if msg != None %}
                    <div class="notification is-danger is-light has-text-centered">
                        <button class="delete"></button>
                        {{ msg }}
                    </div>
                {% endif %}
            </div>
            {# 用户信息修改表单 #}
            <div class="columns is-multiline">
                <div class="card column">
                    {# 标题 #}
                    <header class="card-header has-background-primary">
                        <div class="columns is-full has-text-centered is-multiline">
                            <div class="column is-full">
                                <figure class="image is-128x128 is-rounded">
                                    <img src="{{ MEDIA_URL }}{{ user.avatar }}" alt="Image"
                                         class="is-rounded img-show"
                                         id="img-show">
                                </figure>
                            </div>
                        </div>
                    </header>

                    {# 主体 #}
                    <div class="card-content">
                        <form action="{% url 'users:update_pwd' %}" method="post">
                            <div class="column  is-8 is-offset-2">
                                <input class="input is-primary is-rounded" type="password" name="new_password1"
                                       placeholder="请输入新密码">
                            </div>
                            <div class="column  is-8 is-offset-2">
                                <input class="input is-primary is-rounded" type="password"
                                       name="new_password" placeholder="请再次输入新密码">
                            </div>
                            {# 底部 #}
                            <footer class="card-footer">
                                <button class="button is-rounded is-primary card-footer-item" type="submit">
                                    修&nbsp;&nbsp;改&nbsp;&nbsp;密&nbsp;&nbsp;码
                                </button>
                                <a class="button is-rounded is-primary card-footer-item"
                                   href="{% url 'users:info' %}?nav_tab=info">
                                    修&nbsp;&nbsp;改&nbsp;&nbsp;资&nbsp;&nbsp;料
                                </a>

                            </footer>
                            {% csrf_token %}
                        </form>
                    </div>

                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

